<template>
  <div class="modelsDetails">
        <div class="Citynav">
            <img style="margin-left:12px" @click="totrademark" src="../../assets/images/fanhui.png" alt="">
            <div>{{name}}</div>
            <div style="margin-right:12px;width:18px;height:19px;"></div>
        </div>
        <div v-if="productlist.length != 0">
            <div style="margin-top:44px" >
                <div class="modelsDetails_tab">
                    <div v-for="(item,index) in productlist" :class="active == index ? 'active' : ''" :key="index" @click="clicktab(index)">
                        {{item.year}}款
                    </div>
                </div>
                <div class="position"></div>
                <div class="modelsDetails_page" v-for="(item,index) in productlist[active].title[0].product_option" :key="index" @click="toindex(item.name,item.product_option_id)">
                    {{item.name}}
                </div>
            </div>
        </div>

        <div v-else>
            <div style="margin-top:44px" class="nodata">
                <img src="../../assets/images/nodata.png"/>
                <span>暂无数据</span>
            </div>
        </div>
  </div>
</template>

<script>
export default {
    data:() =>({
        active:0,
        series_id:'',
        productlist:'',
        name:''
    }),
    created() {
        console.log(this.$route.params)
        this.name = this.$route.params.name
        this.series_id = this.$route.params.series_id
        console.log(this.name,this.series_id)
        this.getDetail()
    },
    methods:{
        // 返回上一页
        totrademark(){
            this.$router.push({ 
                name:'trademark'
            })
        },

        // 详情接口
        getDetail(){
            this.$http.getListAllBySeriesIdForSale({series_id:this.series_id}).then(res=>{
                console.log(res)
                if(res.code == 0){
                    this.productlist = res.data.list,
                    console.log(this.productlist)
                }
            })
        },
        // tab切换
        clicktab(index){
            console.log(index)
            this.active = index
        },

        // 监听选择事件
        toindex(namespan,product_option_id){
            console.log(namespan,product_option_id)
            let data = {
                namespan: namespan,
                product_option_id:product_option_id
            }
            localStorage.setItem('vehicle',JSON.stringify(data))
            this.$router.push({ name:'index'})
        },
    },
}
</script>

<style>
@import "index";
</style>